<template>
  <div class="classify-page h100">
    <cell
      v-for="item in classifyList"
      :key="item.articleCategoryId"
      :title="item.articleCategoryName"
      @click="onTagClick(item,departmentId)"
    />
  </div>
</template>

<script>
import { watch, computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import Cell from '@/components/Cell';
import { useCurrentDeptInfo } from '@/hooks/store';
import { useClassify } from '../education/useEducation';
export default {
  components: {
    Cell
  },
  setup() {
    const route = useRoute();
    const categoryId = computed(() => route?.params?.categoryId);
    const departmentId = computed(() => route?.query?.departmentId);

    const currentDept = useCurrentDeptInfo();
    const { onTagClick, getClassify } = useClassify();
    const classifyList = ref([]);
    watch(
      categoryId,
      async () => {
        if (categoryId.value) {
          classifyList.value = await getClassify({
            departmentId: departmentId.value || currentDept.value.departmentId,
            categoryId: categoryId.value
          });
        }
      },
      {
        immediate: true
      }
    );

    return { onTagClick, classifyList, departmentId };
  }
};
</script>

<style lang="scss" scoped>
.classify-page {
  background: #f7f7fa;
}
</style>